<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://com.am.tag" prefix="ui"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<%@ include file="../common.jsp" %>
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="${path}/js/highcharts/highcharts.js"></script>
    <link rel="stylesheet" href="${path }/css/easyui.css" type="text/css"></link>
	<script type="text/javascript" src="${path }/js/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		var obj = null;
		var map = Dialog.getInstance("view").getParam("param");
		$().ready(function(){
			
			method = map.method;
			titleText = map.titleText;
			yAxisText = map.yAxisText; 
			lineToolTip = map.lineToolTip;
			buildChart(map);
			
			$('#div_tabs').tabs({
	   			 onSelect: function (title) {
	   				if(title == "柱状图"){
	   					map.type = "column";
	   				}else if(title == "线状图"){
	   					map.type = "line";
	   				}else{
	   					map.type = "pie";
	   				}
	   				
	   				buildChart(map);
	   			 }
  			});
		});
		
		function buildChart(map){
			ajax.remoteCall(method,[map],function(reply){
				
				var result = reply.getResult();
	
				var type = map.type;
				var options;
				if(type == "column")
				{
					options = {
						chart: {
				            type: 'column',
				            renderTo : "container_column"
				        },
				        title: {
				            text: titleText
				        },
				        xAxis: {
				            categories: result.categories
				        },
				        yAxis: {
				            min: 0,
				            title: {
				                text: yAxisText
				            },
				            stackLabels: {
				                enabled: true,
				                style: {
				                    fontWeight: 'bold',
				                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
				                }
				            }
				        },
				        legend: {
				            align: 'right',
				            x: -70,
				            verticalAlign: 'top',
				            y: 20,
				            floating: true,
				            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
				            borderColor: '#CCC',
				            borderWidth: 1,
				            shadow: false
				        },
				        tooltip: {
				            formatter: function() {
				                return '<b>'+ this.x +'</b><br/>'+
				                    this.series.name +': '+ this.y +'<br/>'+
				                    'Total: '+ this.point.stackTotal;
				            },
				            valueDecimals:1
				        },
				       
				        plotOptions: {
				            column: {
				                stacking: 'normal',
				                dataLabels: {
				                    enabled: true,
				                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
				                }
				            }
				        },
				        series:  result.series
				    };
				}else if(type == "line"){
					

					options = {
						chart : {
							renderTo : "container_line"
						},
						title : {
							text: titleText
						},
						xAxis : {
							categories : result.categories
						},
						yAxis : {
						 	title: {
				                text: yAxisText
				            },
				            plotLines: [{
				                value: 0,
				                width: 1,
				                color: '#808080'
				            }]
						},
						tooltip: {
				            valueSuffix: lineToolTip
				        },
				        legend: {
				            layout: 'vertical',
				            align: 'right',
				            verticalAlign: 'middle',
				            borderWidth: 0
				        },
				        series: result.series
					};
				}else{
					options = {
							chart: {
					            plotBackgroundColor: null,
					            plotBorderWidth: null,
					            plotShadow: false,
					            renderTo : "container_pie"
					        },
					        title: {
					            text: titleText
					        },
					        tooltip: {
					    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					        },
					        plotOptions: {
					            pie: {
					                allowPointSelect: true,
					                cursor: 'pointer',
					                dataLabels: {
					                    enabled: true,
					                    color: '#000000',
					                    connectorColor: '#000000',
					                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
					                }
					            }
					        },
					        series: [{
					            type: 'pie',
					            name: yAxisText,
					            data: result.data
					        }]
					};
				}
				obj = new Highcharts.Chart(options);
			});
		}
	</script>
  </head>
  
  <body style="overflow: hidden;">
  	<div id="div_tabs" class="easyui-tabs">
		<div title="柱状图" style="padding:10px;">
			<div id="container_column" style="min-width:500px;height:400px"></div>
		</div>
		<div title="线状图" style="padding:10px;">
			<div id="container_line" style="min-width:500px;height:400px"></div>
		</div>
		<div title="饼状图" style="padding:10px;">
			<div id="container_pie" style="min-width:500px;height:400px"></div>
		</div>
	</div>
  	
  </body>
  
</html>
